<template>
  <div class="SalSobCfg">
    <div class="main">
      <el-table
        :data="employees"
        border
        stripe
      >
        <el-table-column
          type="selection"
          width="40px"
        ></el-table-column>

        <el-table-column
          label="姓名"
          prop="name"
          width="90px"
        ></el-table-column>

        <el-table-column
          label="工号"
          prop="workID"
          width="90px"
        >
        </el-table-column>

        <el-table-column
          label="邮箱地址"
          prop="email"
          width="180px"
        >
        </el-table-column>

        <el-table-column
          label="电话号码"
          prop="phone"
          width="130px"
        >
        </el-table-column>

        <el-table-column
          label="所属部门"
          width="130px"
        >
          <template v-slot="scope">
            {{scope.row.department == null?  '暂未设置' : scope.row.department.name}}
          </template>
        </el-table-column>

        <el-table-column
          label="工资账套"
          width="200px"
          align="center"
        >
          <template v-slot="scope">

            <el-tooltip
              class="salary"
              effect="dark"
              placement="right"
            >
              <div slot="content">
                <table>
                  <tr>
                    <td>账套名称</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.name}}</td>
                  </tr>
                  <tr>
                    <td>基本工资</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.basicSalary}}</td>
                  </tr>
                  <tr>
                    <td>交通补助</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.trafficSalary}}</td>
                  </tr>
                  <tr>
                    <td>午餐补助</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.lunchSalary}}</td>
                  </tr>
                  <tr>
                    <td>奖金</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.bonus}}</td>
                  </tr>
                  <tr>
                    <td>养老金比率</td>
                    <td v-if="scope.row.salary"> {{scope.row.salary.pensionPer}}</td>
                  </tr>
                  <tr>
                    <td>养老金基数</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.pensionBase}}</td>
                  </tr>
                  <tr>
                    <td>医疗保险比率</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.medicalPer}}</td>
                  </tr>
                  <tr>
                    <td>医疗保险基数</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.medicalBase}}</td>
                  </tr>
                  <tr>
                    <td>公积金比率</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.accumulationFundPer}}</td>
                  </tr>
                  <tr>
                    <td>公积金基数</td>
                    <td v-if="scope.row.salary">{{scope.row.salary.accumulationFundBase}}</td>
                  </tr>
                </table>
              </div>
              <el-tag type="primary">
                {{scope.row.salary == null?  '暂未设置' : scope.row.salary.name}}
              </el-tag>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="200px"
          align="center"
        >
          <template v-slot="scope">
            <el-popover
              placement="right"
              width="380"
              trigger="click"
              @show="showPopover"
              @hide="hidePopover"
            >
              <div class="popover-content">
                <el-select
                  v-model="emloyee.salaryId"
                  :placeholder="scope.row.salary? scope.row.salary.name :'请选择'"
                >
                  <el-option
                    v-for="salary in salaries"
                    :key="salary.id"
                    :label="salary.name"
                    :value="salary.id"
                  ></el-option>
                </el-select>
                <el-button
                  type="primary"
                  style="margin-left:40px"
                  @click="submitPopover(scope.row)"
                >提交</el-button>

                <el-button @click="cancelSubmitPopover">取消</el-button>
              </div>
              <el-button
                type="danger"
                slot="reference"
              >修改工资账套</el-button>
            </el-popover>

          </template>
        </el-table-column>

      </el-table>
    </div>

    <div class="foot">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>
import _ from 'lodash'
import { putRequest } from '@/utils/api'
export default {

  name: 'SalSobCfg',

  data() {
    return {
      employees: [],
      emloyee: {
        salaryId: null
      },
      salaries: [],
      currentPage: 0,
      size: 10,
      total: 0,
      popoverVisible: false
    }

  },

  methods: {
    //初始化所有员工信息
    initEmployees() {
      this.getRequest(`/salary/sobcfg/?currentPage=${this.currentPage}&size=${this.size}`).then(resp => {
        if (resp) {
          this.employees = resp.list
          this.total = resp.total
        }
      })
    },

    //获取所有工资账套
    initSalaries() {
      this.getRequest(`/salary/sobcfg/salary`).then(resp => {
        if (resp) {
          this.salaries = resp
        }
      })
    },
    //切换每页条数
    handleSizeChange(val) {
      this.size = val
      this.initEmployees()
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.initEmployees()
    },
    //显示popover触发
    showPopover() {
      this.initSalaries()

    },
    //隐藏popover触发
    hidePopover() {
      this.emloyee = {
        salary: {
          id: null
        }
      }
      this.initEmployees()
    },
    //提交popover
    submitPopover(row) {

      //若账套信息未改变,或未选择提示无需更新
      if (this.emloyee.salaryId == row.salaryId || this.emloyee.salaryId == null) {
        this.$message.info('数据未改变,无需更新')
        document.body.click()
        return
      }

      let param = _.cloneDeep(row)
      param.salaryId = this.emloyee.salaryId

      this.putRequest(`/salary/sobcfg/`, param).then(resp => {
        if (resp) {
          this.initEmployees()
          document.body.click()
        }
      })

    },

    //取消提交,关闭popover
    cancelSubmitPopover() {
      document.body.click()
    }

  },

  mounted() {
    this.initEmployees()
  },
}
</script>


<style scoped>
.foot {
  display: flex;
  justify-content: flex-end;
  width: 65%;
}
</style>